<template>
  <div :class="classes || ''" class="bg-white-6 shadow-1 border-8 q-pa-md">
    <div class="row items-center text-subtitle1 text-bold">
      {{ $t('AGVCore.AGVTypeDistribution') }}
      <q-space></q-space>
      <template v-for="status in filterAGVStatus" :key="status.value">
        <q-badge :color="status.color" class="q-badge-dot q-ml-md q-mr-sm" rounded />
        <span class="text-body1">{{ status.label }}</span>
      </template>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <div class="row no-wrap justify-center q-gutter-x-md q-pt-sm">
      <div class="image-card-width row no-wrap">
        <div class="col-6 aspect-ratio-1 row justify-center items-center">
          <div class="text-subtitle1">
            <qx-tooltip class="">{{ $t('AGVCore.AGVTotals') }}</qx-tooltip>
            <div class="text-bold">{{ AGVTotals || 0 }}</div>
          </div>
        </div>
        <q-separator class="gradient-separator-y q-mx-auto q-my-md" vertical></q-separator>
      </div>
      <QCarouselSet :cols="cols - 1" :data="filterAGVTypeStatus" class="col" classes="row no-wrap">
        <template v-slot:default="{ row }">
          <div class="col-6 column no-wrap">
            <div :class="row.agvTypeSumSize > 0 ? 'border-blue-10' : 'border-grey-4 bg-grey-1'"
                 class="image-border-width rounded-borders q-pa-md">
              <AMRIMG v-if="row.agvTypeSumSize > 0" :amrType="row.agvTypeCode || row.value"
                      classes="cursor-pointer cursor-hover-image aspect-ratio-1"
                      @click="getAGVList(row.agvTypeCode || row.value)"></AMRIMG>
              <div v-else class="aspect-ratio-1 flex flex-center text-grey-6 text-bold">
                <qx-tooltip>{{ $t('AGVCore.DeviceNotFound') }}</qx-tooltip>
              </div>
            </div>
            <div class="text-center text-bold q-pt-xs">
              <qx-tooltip>
                {{ `${row.agvTypeCode ? getLabelByValue(row.agvTypeCode, AGVTypes)
                : row.label}: ${row.agvTypeSumSize || 0}` }}
              </qx-tooltip>
            </div>
          </div>
          <div class="column justify-around no-wrap q-ml-md q-pb-lg">
            <div v-for="status in filterAGVStatus" :key="status.value" class="text-no-wrap bottom-border-dash q-px-sm">
              <q-badge :color="status.color" class="q-badge-dot q-mr-sm" rounded />
              <span class="text-body1 text-bold">{{ row[fieldMaps[status.value]] || 0 }}</span>
            </div>
          </div>
        </template>
      </QCarouselSet>
    </div>
  </div>
  <q-modal v-model="modalVisible" v-model:loading="loading" :header="header" :menuBtn="false" :persistent="false"
           nonScrollArea width="520">
    <qx-table :data="tableData" :option="tableOption"></qx-table>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { Screen } from 'quasar'
import { postAPI } from 'src/api/index.js'
import { AGVStatus, AGVTypes } from 'src/enum/index.js'
import AMRIMG from 'src/views/AGVCore/AMRIMG.vue'
import { computed, onMounted, ref } from 'vue'
import { getLabelByValue } from 'src/utils/utils.js'

defineProps({ classes: String })

const header = ref('')
const AGVTotals = ref(0)
const tableData = ref([])
const loading = ref(false)
const AGVTypeStatus = ref([])
const modalVisible = ref(false)
const fieldMaps = {
  CHARGING: 'chargeStatus', IDLE: 'freeStatus', EMERGENCY: 'errorStatus', RUNNING: 'taskStatus',
  OFFLINE: 'offlineStatus'
}
const cols = computed(() => {
  if (['xl', 'lg', 'md'].includes(Screen.name)) return 5
  if (Screen.width < 615) return 2
  if (Screen.width < 810) return 3
  if (Screen.width < 1024) return 4
  return 2
})
const filterAGVStatus = computed(() => AGVStatus.value.filter(el => el.value !== 'TOTALS'))
const filterAGVTypeStatus = computed(() => {
  const maxCols = cols.value - 1
  if (!AGVTypeStatus.value.length) return AGVTypes.value.slice(0, maxCols)
  const filterList = AGVTypeStatus.value.filter(el => el.agvTypeSumSize > 0)
  return filterList.length < maxCols ? AGVTypeStatus.value.slice(0, maxCols) : filterList
})
const tableOption = computed(() => {
  return {
    maxHeight: 'inherit',
    column: [{
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvBrandCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AGVModel')}`, field: 'agvTypeCode', options: AGVTypes.value, minWidth: 60, hide: true
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AGVStatus')}`, field: 'status', options: AGVStatus.value, useTag: true, minWidth: 80
    }]
  }
})
const initData = () => {
  postAPI('/yfagv/api/agvAllStatus/agvStatus', { nonLoadingBar: true }, data => {
    const { agvSumSize = 0, agvTypeStatusVOS = [] } = data || {}
    AGVTotals.value = agvSumSize
    AGVTypeStatus.value = agvTypeStatusVOS
  })
}
const getAGVList = agvTypeCode => {
  loading.value = true
  header.value = getLabelByValue(agvTypeCode, AGVTypes.value, {}, `${i18n.t('Unknown')}`)
  postAPI('/yfagv/api/agvAllStatus/selectAgvStatusMain', { agvTypeCode }, data => {
    tableData.value = data
    loading.value = false
    modalVisible.value = true
  }, () => loading.value = false)
}
onMounted(initData)
</script>
<style lang="scss" scoped>
.image-card-width {
  width: v-bind('`${100 / cols}%`');
}

.image-border-width {
  border-width: .2rem;
}

.bottom-border-dash {
  border-bottom: .08rem dashed $grey-4;
}
</style>